import React, {Component} from 'react';
import './index.css'
import {Button, Checkbox, Form, Input, message} from 'antd';
import {LockOutlined, UserOutlined} from '@ant-design/icons';
import {connect} from "react-redux";
import DocumentTitle from "react-document-title";
import {withRouter, Redirect} from 'react-router-dom';
import {login} from "../../store/actions";
import {reqVerifyAuthToken} from "../../api/login";

class Login extends Component {


    componentDidMount() {

    }

    handleSubmit = (e) => {
        // const sss = this.props.login(e);
        const {login} = this.props;
        login(e).then((response) => {
            this.props.history.push("/app");

        }).catch((error) => {
            message.error(error);
        });

        // this.props.history.push("/app");
    };
    showForgotModal = () => {

    };


    render() {

        return (
            // !this.props.token ? <Redirect to="/app"/> :
            <DocumentTitle title={"用户登录"}>
                <div className="login">
                    <div className="login-box">
                        <div className="login-logo">
                            <span>React Admin</span>

                        </div>

                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{remember: true}}
                            onFinish={this.handleSubmit}
                        >
                            <Form.Item
                                name="username"
                                rules={[{required: true, message: '用户名不能为空!'}]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon"/>}
                                       placeholder="请输入用户名"/>
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{required: true, message: '密码不能为空!'}]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon"/>}
                                    type="password"
                                    placeholder="请输入密码"
                                />
                            </Form.Item>
                            <Form.Item>
                                <Form.Item name="remember" valuePropName="checked" noStyle>
                                    <Checkbox>记住我</Checkbox>
                                </Form.Item>

                                <a className="login-form-forgot" href="/#" onClick={this.showForgotModal}>
                                    忘记密码？
                                </a>
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登 录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </DocumentTitle>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        ...state.user,
        ...state.authToken,
    }
};
export default connect(mapStateToProps, {login})(Login);
